<template>
  <CompOperate
    :field="field"
    :designer="designer"
    :design-state="designState"
    :parent-list="parentList"
    :parent-widget="parentWidget"
    :sub-form-row-id="subFormRowId"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :index-of-parent-list="indexOfParentList"
    :display-style="field.options.displayStyle"
  >
    <div class="scene-window-patient-widget" :style="getStyle('area')">
      <div class="window-area">
        <div
          class="top-wrp"
          :style="getStyle('topWrp')"
          :class="
            optionsInfo['roomNameBgType'] === 'liner'
              ? optionsInfo['roomLinerClass']
              : ''
          "
        >
          <div class="logo-wrp" v-if="optionsInfo.logoUrl" :style="getStyle('logo')">
            <img class="logo" :src="optionsInfo.logoUrl" alt="企业Logo" />
          </div>
          <div class="location" :style="getStyle('roomName')">
            <ScrollX>{{ getRoomInfo }}</ScrollX>
          </div>
          <!-- <div class="number" :style="getStyle('number')">
              {{
                optionsInfo['roomNumberAuto'] ?
                    getWindowDeptInfo[optionsInfo['roomNoKey'] || 'roomNo'] : optionsInfo['roomNumber']
              }}
            </div> -->
        </div>

        <div class="current-area">
          <div
            class="title"
            :style="getStyle('currentTitle')"
            :class="
              optionsInfo.currentPatientWrpBgType
                ? optionsInfo['currentPatientWrpLinerClass']
                : ''
            "
          >
            {{ optionsInfo.currentPatientTitle || "采血" }}
          </div>
          <div class="right-con" :style="getStyle('currentContent')">
            <template
              v-for="(item, key) in getRoomDoctorInfo('treatingPatient')"
            >
              <div class="content" v-if="key === 0">
                <div
                  class="content"
                  v-if="optionsInfo['currentPatientConnectWrap']"
                >
                  <div class="pat-no">
                    <ScrollX>{{ item.orderNo || "\u00a0" }}</ScrollX>
                  </div>
                  <div class="pat-name">
                    <ScrollX>{{ item.patientName || "\u00a0" }}</ScrollX>
                  </div>
                </div>
                <p v-else :style="getStyle('patientName')">
                  {{ item.orderNo || "\u00a0"
                  }}{{ item.patientName || "\u00a0" }}
                </p>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import { NoticeBar, Swipe, SwipeItem } from "vant";
import emitter from "@/utils/designer/emitter";
import { pxToVw } from "@/utils/common";
import ScrollY from "@c/public/seamlessScroll/ScrollY.vue";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import { buildParentApi } from "@/utils/designer/util";
import vueSeamlessScroll from "vue-seamless-scroll";
import { setWindowDeptInfo } from "@/store/modules/actions";

export default {
  name: "scene-window-current-patient-1920-1-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollX,
    CompOperate,
    NoticeBar,
    Swipe,
    SwipeItem,
    ScrollY,
    vueSeamlessScroll,
  },

  props: {
    widget: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi(),
    },
  },

  data() {
    return {
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
    };
  },

  computed: {
    // 模板配置行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Array();
        let Obj = Object();
        console.log(info);
        switch (val) {
          case "area":
            Reflect.set(Obj, "height", pxToVw(info.areaHeight));
            return Obj;
          case "topWrp":
            Reflect.set(Obj, "height", pxToVw(info.roomNameHeight));
            Reflect.set(Obj, "fontSize", pxToVw(info.roomNameFontSize));
            Reflect.set(Obj, "background", info.roomNameBackground);
            return Obj;
          case "logo":
            Reflect.set(Obj, "width", pxToVw(info.logoWidth));
            Reflect.set(Obj, "height", pxToVw(info.logoHeight));
            return Obj;
          case "roomName":
            Reflect.set(Obj, "width", pxToVw(info.roomNameWidth));
            Reflect.set(Obj, "color", info.roomNameColor);
            return Obj;
          case "currentTitle":
            Reflect.set(Obj, "height", pxToVw(info.currentPatientWrpHeight));
            Reflect.set(Obj, "width", pxToVw(info.currentPatientWrpWidth));
            Reflect.set(
              Obj,
              "borderRadius",
              pxToVw(info.currentPatientWrpRadius)
            );
            Reflect.set(Obj, "background", info.currentPatientWrpBackground);
            Reflect.set(
              Obj,
              "fontSize",
              pxToVw(info.currentPatientWrpFontSize)
            );
            Reflect.set(
              Obj,
              "marginLeft",
              pxToVw(info.currentPatientWrpMarginLeft)
            );
            Reflect.set(Obj, "color", info.currentPatientWrpColor);
            return Obj;
          case "currentContent":
            Reflect.set(
              Obj,
              "fontSize",
              pxToVw(info.currentPatientConnectFontSize)
            );
            Reflect.set(Obj, "color", info.currentPatientConnectColor);
            return Obj;
          case "patientName":
            Reflect.set(Obj, "fontSize", pxToVw(250));
            Reflect.set(Obj, "color", "#FFFFFF");
            return Obj;
        }
      };
    },

    // 获取科室信息
    getWindowDeptInfo() {
      let devType = this.devType;
      let roomDoctorInfo = this.$store.getters["getWindowDeptInfoInfo"];
      if (devType) {
        return roomDoctorInfo.apiData;
      } else {
        return roomDoctorInfo.mockData;
      }
    },

    //获取医生-患者信息
    getRoomDoctorInfo() {
      return function (type) {
        let temp = Array();
        let devType = this.devType;
        let roomDoctorInfo = this.$store.getters["getRoomDoctorInfo"];
        let data;
        if (devType) {
          data = roomDoctorInfo.apiData || Array();
        } else {
          data = roomDoctorInfo.mockData || Array();
        }

        if (data?.length) {
          // 截取第一位医生
          let topPlace = data.slice(0, 1);
          // 获取首位医生的就诊和候诊的患者--数组
          return topPlace[0][type] || Array();
        } else {
          temp.push({});
          return temp[0][type] || Array();
        }
      };
    },

    getRoomInfo() {
      const self = this;
      let info = self.optionsInfo || Array();
      let deptInfo = this.getWindowDeptInfo;
      if (info["roomNameAuto"]) {
        if (!!info && !!info["roomNameKey"]) {
          return deptInfo[info["roomNameKey"]] || deptInfo["roomName"];
        } else {
          return deptInfo["roomName"];
        }
      } else {
        return info["roomName"];
      }
    },
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "roomDoctorInfo":
          console.log(`医生-患者-信息-${data}`);
          this.$store.dispatch(
            "setRoomDoctorInfo",
            this.$lodash.cloneDeep(data)
          );
          break;
        case "roomDeptInfo":
          console.log(`科室诊室信息-${data}`);
          this.$store.dispatch(
            "setWindowDeptInfo",
            this.$lodash.cloneDeep(data)
          );
          break;
      }
    },
  },

  watch: {
    field: {
      handler: function (val) {
        let optionsInfo = val.options[val.options.config];
        if (!Reflect.has(optionsInfo, "deptName")) {
          Reflect.set(optionsInfo, "deptName", "采血处");
        }
        this.optionsInfo = optionsInfo;
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.scene-window-patient-widget {
  color: #333;
  height: 150px;
  font-size: 40px;
  box-sizing: border-box;
  flex: inherit;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  .liner-1 {
    background: linear-gradient(270deg, #00f0fb 0%, #0670b1 100%);
  }
  .liner-2 {
    background: linear-gradient(270deg, #00e5fb 0%, #0b94e7 100%);
  }

  .window-area {
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;

    .flex-item {
      overflow: inherit;
      border: none;
    }
    .top-wrp {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      // background-image: url(http://192.168.81.200:7000/upload/material/img/195b9ef95c97497ba827d64cb78f3c7e-20250311.png);
      // background-size: auto 88px;
      // background-position: 30px 40px;
      // background-repeat: no-repeat;
      .logo-wrp {
        position: absolute;
        left: 17px;
        top: 34px;
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .logo {
          width: 100%;
          height: auto;
        }
      }
      .location {
        overflow: hidden;
      }
    }
    .current-area {
      flex: 1;
      display: flex;
      align-items: center;
      .title {
        border-radius: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .right-con {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        padding: 0 40px;
        overflow: hidden;
        .content {
          width: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;

          .pat-no {
            width: 100%;
            font-size: 250px;
            text-align: center;
          }
          .pat-name {
            width: 100%;
            height: 250px;
            font-size: 250px;
            text-align: center;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
